<template>
  <Card v-model="props.cardType">
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c"> 应用活跃用户数（按租户）</div>
    </div>
    <div class="md:flex">
      <AppTenantStepTimePicker
          ref="AppTenantStepTimePickerRef"
          class="w-full enter-x"
          v-bind="props"
          @success="handleSuccess"
      >
      </AppTenantStepTimePicker>
    </div>
    <div class="md:flex">
      <div :id="lineChartName" style="width: 800%; height: 450%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import {Card} from 'ant-design-vue';
import {ref} from 'vue';
import moment from 'moment';
import * as echarts from 'echarts';
import {
  getAppActiveUserNumByTenant
} from '/@/api/operation-center/app-operation/subscription-analysis/subscriptionAnalysis';
import {
  AppActiveUserNumByTenantMap
} from '/@/api/operation-center/app-operation/subscription-analysis/model/subscriptionAnalysisModel';
import AppTenantStepTimePicker from '/@/views/operation-center/components/AppTenantStepTimePicker.vue';

let startDate = moment().add(-9, 'months').format('YYYY-MM-DD HH:mm:ss');
let stepTimeRange = {
  stepType: 0,
  startTime: startDate,
  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
};
const initAppStepTimeRange = {
  appId: '',
  tenantCode: '',
  stepType: 0,
  startTime: moment(stepTimeRange.startTime, 'YYYY-MM'),
  endTime: moment(stepTimeRange.endTime, 'YYYY-MM'),
};
const props = ref({
  cardType: '',
  stepConfig: 'app-active-users-in-total',
  initData: initAppStepTimeRange,
});

var option;

const AppTenantStepTimePickerRef = ref();


let lineChartName = 'app-active-user-num-by-tenant-line-chart';

function collectAppActiveUserNumByTenantList(
    appActiveUserNumInTotalMapList: AppActiveUserNumByTenantMap[],
    dateList: Array<any>,
    activeUserNumList: Array<any>,
) {
  for (let i = 0; i < appActiveUserNumInTotalMapList.length; i++) {
    let appActiveUserNumInTotalItem = appActiveUserNumInTotalMapList[i];
    dateList.push(appActiveUserNumInTotalItem.time);
    activeUserNumList.push(appActiveUserNumInTotalItem.userNum);
  }
}

const handleSuccess = (params) => {
  let lineChartDom = document.getElementById(lineChartName);

  let myChart = echarts.init(lineChartDom);


  let dateList = [];
  let activeUserNumList = [];

  getAppActiveUserNumByTenant(params).then((res) => {
    collectAppActiveUserNumByTenantList(res, dateList, activeUserNumList);
    option = {
      title: {
        text: '活跃用户数',
      },
      xAxis: {
        type: 'category',
        data: dateList,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: activeUserNumList,
          type: 'line',
        },
      ],
    };

    option && myChart.setOption(option);
  });
};

</script>
